<template>
    <div class="search-history">
        
        <van-cell title="搜索历史" >
            <template #right-icon>
                <div v-if="isDeleteState">
                    <span @click="$emit('clear-search-history')">删除全部</span>
                    &nbsp;&nbsp;
                    <span @click="isDeleteState=false">完成</span>
                </div>
                <van-icon name="delete-o" v-else @click="isDeleteState=true"/>
            </template>
        </van-cell>
        <van-cell :title="item" v-for="(item, index) in historySearchs" :key="index" @click="deleteHistorySearch(item,index)">
            <template #right-icon>
                <van-icon name="close" v-show="isDeleteState"/>
            </template>
        </van-cell>
    </div>
</template>

<script>
export default {
    props: {
        historySearchs: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            isDeleteState:false
        }
    },
    methods: {
        deleteHistorySearch(item,index) {
            if (this.isDeleteState) {//删除状态
                this.historySearchs.splice(index,1)
            } else {//选中状态
                this.$emit('searchHistory',item)
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>